export const rankColors = [
  '#55CBF2', '#8BE09C', '#FFC573', '#FF9DB5',
  '#FFB082', '#F99B96', '#ff74a5', '#A2AEFA',
  '#8996FA', '#FA5A57', '#FA8E57'
]
export const LineOptMixin = {
  color: '#55CBF2',
  title: {
    show: false
  },
  tooltip: {
    trigger: 'axis',
    padding: 12,
    backgroundColor: '#505050',
    axisPointer: {
      axis: 'x',
      lineStyle: {
        color: '#C0C0C0'
      }
    },
    textStyle: {
      fonSize: 14,
      fontFamily: '"-apple-system", "BlinkMacSystemFont", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;'
    },
    extraCssText: 'box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);border-radius: 2px;'
  },
  grid: {
    top: 10,
    left: 10,
    right: 0,
    bottom: 10,
    show: false,
    containLabel: true,
    borderColor: '#E5E7ED',
    backgroundColor: '#ffffff'
  },
  xAxis: {
    type: 'category',
    splitLine: {
      show: false,
    },
    axisLabel: {
      color: '#212121',
      align: 'center',
      formatter: (name) => {
        return `{text|${name}}`
      },
      rich: {
        text: {
          padding: [4,4,4,4]
        }
      },
    },
    axisLine: {
      lineStyle: {
        color: '#F4F4F4'
      }
    },
    axisTick: {
      show: true,
      alignWithLabel: true
    },
    boundaryGap: [10],
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#212121'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#f4f4f4']
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show:false
    },
    minInterval: 0.1,
  },
  series: [{
    type: 'line',
    showSymbol : false, 
    symbolSize: 4,
    areaStyle: {
      normal: {
        opacity: 0
      }
    },
    cursor: 'pointer',
    lineStyle: {
      normal: {
        color: '#55CBF2',
        width: 3
      },
    },
  }]
}

export const BarOptMixin = {
  title: {
    show: false
  },
  tooltip: {
    trigger: 'axis',
    padding: 12,
    backgroundColor: '#505050',
    axisPointer: {
      axis: 'x',
      lineStyle: {
        color: '#C0C0C0'
      }
    },
    textStyle: {
      fonSize: 14,
      fontFamily: '"-apple-system", "BlinkMacSystemFont", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;'
    },
    extraCssText: 'box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);border-radius: 2px;'
  },
  grid: {
    show: false,
    // top: '14px',
    left: 0,
    // right: '10px',
    bottom: 0,
    containLabel: true,
    borderColor: '#E5E7ED',
    backgroundColor: '#ffffff'
  },
  xAxis: {
    type: 'category',
    axisTick: {
      alignWithLabel: true,
      show: false
    },
    axisLabel: {
      color: '#212121'
    },
    axisLine: {
      lineStyle: {
        color: '#F4F4F4'
      },
      show: false,
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: ['#F4F4F4']
      }
    },
  },
  yAxis: {
    type: 'value',
    minInterval: 1,
    axisLine: {
      lineStyle: {
        color: '#7a7c7f'
      },
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#212121'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#F4F4F4']
      }
    }
  },
  series: [{
    name: '柱状图',
    type: 'bar',
    barWidth: '50px',
    itemStyle: {
      normal: {
        color: '#ffaac2'
      }
    }
  }]
}

export const PieOptMixin = {
  title: {
    show: false
  },
  tooltip: {
    trigger: 'item',
    padding: 12,
    backgroundColor: '#505050',
    formatter: (params) => {
      return `${params.name} ${Math.round(params.percent)}%`
    },
    textStyle: {
      fonSize: 14,
      fontFamily: '"-apple-system", "BlinkMacSystemFont", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;'
    },
    position: 'right',
    extraCssText: 'box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);border-radius: 2px;'
  },
  color: rankColors,
  legend: {
    orient: 'vertical',
    left: '350px',
    top: '35px',
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 16,
    textStyle: {
      fontSize: 14,
      color: '#7a7c7f',
      padding: [0,0,0,6]
      // lineHeight: 28
    },
  },
  series: [{
    type: 'pie',
    center: ['50%', '45%'],
    radius: ['40%', '80%'],
    startAngle: 90,
    stillShowZeroSum: false,
    label: {
      normal: {
        show: false
      },
      emphasis: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        borderWidth: 2,
        borderColor: '#fff'
      },
      emphasis: {
        borderWidth: 0,
        shadowBlur: 0,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}
export function calcTotalFun (data) {
  return (num) => {
    return Math.round(num / calcTotal(data) * 100)
  }
}
export function calcTotal (obj) {
  let count = 0
  for (let key in obj) {
    count += obj[key]
  }
  return count || 100
}
export function sortFun (arr, legend) {
  return arr.sort((item1, item2) => {
    if (legend) {
      if (legend[item1.name] == 0) {
        item1.value = 0
      } 
      if (legend[item2.name] == 0) {
        item2.value = 0
      }
    }
    return item2.value - item1.value
  })
}
